.g-container {
  margin: auto;
}
.btn-a,
.btn-b {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 40px;
}
.btn-a {
  background: red;
  anchor-name: --yasuo;
}
.btn-a:hover ~ .anchor {
  position-anchor: --yasuo;
  left: anchor(--yasuo center);
  top: anchor(--yasuo bottom);
  transform: translate(-50%, 5px);
  display: block;
}
.btn-b {
  background: green;
  anchor-name: --gailun;
}
.btn-b:hover ~ .anchor {
  position-anchor: --gailun;
  left: anchor(--gailun center);
  top: anchor(--gailun bottom);
  transform: translate(-50%, 5px);
  display: block;
}
.anchor {
  background: gray;
  width: 120px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  transition: all 0.5s linear;
}

ul {
  position: relative;
  width: 700px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  resize: horizontal;
  overflow: hidden;
  list-style: none;

  li {
    flex-grow: 1;
    height: 100px;
    cursor: pointer;
    color: #000;
    font-size: 48px;
    line-height: 100px;
    text-align: center;
    // anchor-name: var(--anchor-name);
  }

  &::before {
    position: absolute;
    content: "";
    height: 5px;
    background: transparent;
    bottom: 0;
    left: anchor(var(--target) left);
    right: anchor(var(--target) right);
    transition: 0.3s all;
    transform: scaleX(5);
  }
}
ul:hover::before {
  background: #000;
  transform: scaleX(1);
}

@for $i from 1 to 8 {
  ul:has(li:nth-child(#{$i}):hover) {
    --target: --anchor-#{$i};
  }
  li:nth-child(#{$i}) {
    anchor-name: --anchor-#{$i};
  }
}

.text-wrap {
  position: relative;
  span {
    color: deeppink;
  }
  &::before,
  &::after {
    position: absolute;
    transition: 0;
    opacity: 0;
  }

  &::before {
    content: "";
    top: calc(anchor(var(--target) top) + 10px);
    left: calc(anchor(var(--target) left) + 5px);
    border: 8px solid transparent;
    border-bottom: 8px solid #000;
  }
  &::after {
    content: "Alert Tips!";
    width: 80px;
    padding: 2px 4px;
    font-size: 14px;
    background: #fff;
    border: 2px solid #000;
    top: calc(anchor(var(--target) top) + 24px);
    left: anchor(var(--target) left);
    right: anchor(var(--target) right);
  }
}

p:has(span:hover)::before,
p:has(span:hover)::after {
  opacity: 1;
}
@for $i from 1 to 10 {
  p:has(span:nth-child(#{$i}):hover) {
    --target: --anchor-#{$i};
  }
  p span:nth-child(#{$i}) {
    anchor-name: --anchor-#{$i};
  }
}
@position-try --position-bottom {
  left: anchor(--btn center);
  bottom: anchor(--btn top);
  top: unset;
  margin-bottom: 10px;
}
.position-try-fallbacks {
  padding: 100px 0;
  .btn {
    anchor-name: --btn;
    border: 1px dashed #000;
    background: #ddd;
    width: 130px;
    height: 40px;
    margin: auto;
  }

  .popover {
    position: absolute;
    position-anchor: --btn;
    left: anchor(--btn center);
    top: anchor(--btn bottom);
    // bottom: anchor(--btn top);
    transform: translate(-50%, 5px);
    background: pink;
    color: white;
    position-try-fallbacks: --position-bottom;
  }
}
